<style lang="scss" scoped>
  .input-wrap{
    width:300px;
    height:45px;
    background:rgba(255,255,255,1);
    border:1px solid rgba(150,150,150,1); 
  }

  .input{
    border: none;
    outline: none;
    width: 100%; height: 100%;
    color: #969696;
    padding: 0 18px;
    box-sizing: border-box;
    font-size: 16px;
  }

 
</style>

<template>
  <div class="input-wrap">
      <input
        class="input" 
        :type="type" 
        :placeholder="placeholder" 
        :value="value" @input="input">
  </div>
</template>

<script>
  export default {
    data () {
      return {

      }
    },
    methods: {
      input (e) {
        this.$emit('input', e.target.value)
      }
    },
    props: {
      type: {
        type: String,
        default: 'text'
      },
      placeholder: {
        type: String,
        default: ''
      },
      value: ''
    }
  }
</script>
